var path = require('path')
    // 导入在内存中生成 HTML页面的插件
    // 只要是插件，一定要放到 plugins节点中去
var htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
    // mode: "production",
    entry: path.join(__dirname, './src/main.js'), // 入口表示，要使用的webpack打包哪个文件
    output: { //输出文件相关的配置
        path: path.join(__dirname, './dist'), // 指定打包好的文件，输出到哪个目录中
        filename: 'bundel.js' //这是指定输出的文件的名称
    },
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({ // 创建一个在内存中生成HTML 页面的插件
            template: path.join(__dirname, './src/index.html'),
            // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面 
            filename: 'index.html' // 指定生成的页面的名称
        }),
        new VueLoaderPlugin()
    ], //所有webpack插件的配置节点
    module: { // 这个节点，用于配置所有第三方模块加载器
        rules: [{ // 所有第三方模块的匹配规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, // 配置处理CSS文件的第三方loader规则
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, // 配置处理less文件的第三方loader规则
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, // 配置处理less文件的第三方loader规则
            {
                test: /\.jpg$/,
                use: ['url-loader?limit=5036', 'file-loader']
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
            },
        ]
    },
}